<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/details.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<link rel="stylesheet" href="css/style.css" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
	<script src="img/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/xiaomi.js" type="text/javascript" charset="utf-8"></script>
	<body>
	<jsp:include page="head.jsp"></jsp:include>
	
		<!--轮播图-->
		<div id="lunbo">
			
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>
			
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="img/pms_1581493329.10251213.jpg" alt="...">
			      <div class="carousel-caption">
			      
			      </div>
			    </div>
			    
			    <c:forEach items="${pilist }" var="pi">
			    <div class="item">
			      <img src="${pi.picturesrc }">
			      <div class="carousel-caption">
			      
			      </div>
			    </div>
			    </c:forEach>
			    
			    

			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
	</div>
    	<!--简介-->
   		<div id="jieshao">
   			 <c:forEach items="${pplist }" var="p">
				<h1 style="font-size: 30px;color: red;"> ${p.pname}</h1>
			   
   			<h5>${p.pmodel }
   			</h5>
   			<span class="mi10">
   				小米自营
   			</span>
   			<h4 class="mi10"> ${p.pmprice}元</h4>
   			<div id="div-top">
   			</div>
   			<div id="address-1" class="div-colour">
   				<div>
   					<span id="address" class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
   				</div>
   				
   				<div id="address-2">
   				<span>河南省</span>
   				<span>&nbsp;&nbsp;&nbsp;郑州市</span>
   				<span>&nbsp;&nbsp;&nbsp;新郑市</span>
   				<span>&nbsp;&nbsp;&nbsp;龙湖镇</span><br />
   				<span class="mi10">有现货</span>
   				</div>
   			</div>
   			<h4>选择版本</h4>
   			<div>
   				<table width="310px"; height="50px";>
   					<tr>
   						<td class="table-td">8GB+128GB</td>
   						
   					</tr>
   				</table>
   			</div>
   			<h4 style="padding-top: 20px;">选择颜色</h4>
   			<div>
   				<table width="310px"; height="50px";>
   					<tr>
   						<td class="table-td">${p.pcolor }</td>
   						
   					</tr>
   					<tr style="height: 10px;">
   					</tr>
   					
   				</table>
   			</div>
   			<div class="div-colour" style="height: 120PX;">
   				
   				<h5 id="div-h5"> ${p.pname}&nbsp;8G+256G&nbsp;${p.pcolor }</h5><br />
   				<h3 id="div-h3" class="mi10">总计:${p.pmprice}</h3>
   			</div>
   			<div id="">
   				<input type="button" class="btn-but"  value="加入购物车">
   				<input type="button" class="btn-but-1"  value="❤&nbsp;&nbsp;喜欢">
   			</div>
   			 </c:forEach>
   			<div style="padding-top: 20px;">
   				<h4>
   				<span class="glyphicon glyphicon-ok">小米自营</span>
   				<span class="glyphicon glyphicon-ok">小米发货</span>
   				<span class="glyphicon glyphicon-ok">7天无理由退货</span>
   				<span class="glyphicon glyphicon-ok">运费说明</span>
   				<span class="glyphicon glyphicon-ok">企业信息</span><br />
   				</h4>
   				<h4>
   				<span class="glyphicon glyphicon-ok">售后服务政策</span>
   				<span class="glyphicon glyphicon-ok">7天价格保护</span>
   				</h4>
   			</div>
   		</div>
   		<div style="background-color: whitesmoke;height: 300px;">
   			<div class="div-price">
   				<h3>价格说明</h3>
   			</div>
   			<div class="div-price-1">
   				<img src="img/a482afa34053b1b32ece1023475af7fb.jpeg"/>
   			</div>
   		</div>
   		<jsp:include page="foot.jsp"></jsp:include>
	</body>
</html>
